<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <body>
        <ui:composition template="./../../WEB-INF/templates/noFooterCandidateTemplate.xhtml">
            <ui:define name="content">
                <h:form id="bookForm" styleClass="whiteForm" enctype="multipart/form-data">
                    <h:outputScript target="head" library="javascript" name="masonry.js"></h:outputScript>
                    <h:outputScript target="head" library="javascript" name="bookCandidate.js"></h:outputScript>
                    <p:growl id="bookGrowl" showDetail="false" life="4000"/>
                    <p:dialog position="left" onShow="overlayEvent();" maximizable="false" minimizable="false" resizable="false" modal="true" showEffect="fade" hideEffect="fade" dynamic="true" id="pictureDialog" styleClass="pictureDialog" widgetVar="pictureDialog">
                        <p:panel id="pictureDialogPanel" styleClass="noMargin noPadding noBorder">
                            <h:graphicImage styleClass="detailPicture" value="/candidateFiles/#{candidateBookImagesBean.candidate.idCandidate.toString()}/images/#{candidateBookImagesBean.selectedPicture.image}" />  
                            <p:commandButton styleClass="educationalBackgroundButton updatePicturesButton" oncomplete="pictureDialog.hide();initBookCandidate();" update=":bookForm:galleryPanel" actionListener="#{candidateBookImagesBean.removeImage()}" value="#{messages.Remove}"></p:commandButton>
                        </p:panel>
                    </p:dialog>
                    <p:panel id="galleryPanel" styleClass="noMargin noPadding noBorder">
                        <p:dataGrid emptyMessage="#{messages.NoPictures}" styleClass="noBorder noMargin noPadding bookDataGrid" id="bookPicturesDataGrid" var="bookImage" value="#{candidateBookImagesBean.candidate.candidateBookImageList}" columns="5" rows="#{candidateBookImagesBean.candidate.candidateBookImageList.size()}" paginator="false" >
                            <p:commandLink update=":bookForm:pictureDialog" oncomplete="pictureDialog.show();">
                                <h:graphicImage styleClass="allWidth" value="/candidateFiles/#{candidateBookImagesBean.candidate.idCandidate.toString()}/images/#{bookImage.image}" />  
                                <f:setPropertyActionListener value="#{bookImage}" target="#{candidateBookImagesBean.selectedPicture}"></f:setPropertyActionListener>
                            </p:commandLink>
                        </p:dataGrid>
                    </p:panel>
                    <p:panel header="#{messages.AddImages}" styleClass="noMargin noPadding center noBorder marginTop noPaddingLeftTitle">
                        <p:fileUpload oncomplete="initBookCandidate();" styleClass="imageFileUpload bookFileUpload" update="galleryPanel" id="bookFileUploader" uploadLabel="#{messages.Upload}" label="#{messages.BustImageFileUploadLabel}" cancelLabel="#{messages.Cancel}" invalidSizeMessage="#{messages.BustFileSize}" invalidFileMessage="#{messages.BustFileFormat}" requiredMessage="#{messages.BustRequired}" fileUploadListener="#{candidateBookImagesBean.uploadBookImage}"    
                                        process="@this"
                                        sizeLimit="3000000"   
                                        allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                    </p:panel>
                    <script type="text/javascript">
                        jQuery(document).ready(function() {
                            initBookCandidate();
                        });
                    </script>
                </h:form>    
            </ui:define>
        </ui:composition>
    </body>
</html>
